<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>Clock</title>
    <script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
  /*
      function tick1(){
          const element = (
              <div>
                  <h1>Hello, world!</h1>
                  <h2>It is {new Date().toLocaleTimeString()}.</h2>
              </div>
          );

          ReactDOM.render(
              element,
              document.getElementById('root')
        );
      }

      function Clock0(props) {
          return (
              <div>
                  <h1>Hello, world!</h1>
                  <h2>It is {props.toLocaleTimeString()}.</h2>
              </div>
          );
      }

      function tick2() {
          ReactDOM.render(
              <Clock date = {new Date()} />,
              document.getElementById('root')
          );
      }
  */

  class Clock2 extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        date: new Date()
      };
    }


    componentDidMount() {
      this.timerID = setInterval(() => this.tick(), 1000);
    }


    componentWillUnmount() {
      clearInterval(this.timerID);
    }

    tick() {
      this.setState({
        date: new Date()
      });
    }

    render() {
      return (
        <div>
          <h1>Hello, world!</h1>
          <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
        </div>
      );
    }
  }


  //setInterval(tick2, 1000); //call the function at a set interval in ms

  ReactDOM.render(
    <Clock2/>,
    document.getElementById('root')
  );

</script>
</body>
</html>
